import React, { Component } from 'react'
import './index.scss'
import { message , Carousel } from 'antd';
import 'antd/dist/antd.css';
import Header from '../../components/Header/header'
import Footer from '../../components/Footer/footer'
import { Swiper, SwiperSlide } from 'swiper/react';
import 'swiper/swiper.scss';
import { set , get, remove, UrlSearch } from '../../axios/localstorage'
import { getApiBanner , getApiIndexData ,  getApiBasicInfo , getApiIndexHref , getApiCoursesIndex , getApiImageNewInfo ,
    getApiIndexNewsInfo , getApisignlist , getApiMechanismList , getApiHonorJs , getApiHomeBrandType , getApiHomeTeacher , getApiLiveList , getApiLogin , getApiUserInfo , getApiresetpwd , getApiSend } from "../../axios/api"


export default class index extends Component {

    state = {
        banner:[],
        slide:[{},{},{},{},{}],
        slidesPerView:5,
        showSwiper:false,
        showLiveSwiper:false,
        showCourseSwiper:false,
        classList:[{},{},{},{},{},{},{},{},{},{}],
        liveList:[],
        currentIndex:5,
        notice_info:[],
        policy_info:[],
        basic_info:{},
        teacher_info:[],
        teacher_list:[],
        course_info:[],
        signList:[],
        signList2:[],
        signList3:[],
        honorList:[],
        activeIndex:10,
        timer:'',
        timer2:'',
        timer3:'',
        type:1,
        top:500,
        userinfo:{},
        account:'',
        password:'',
        newpassword:'',
        confirmpassword:'',
        code:'',
        isforget:false,
        showMsg:false,
        showMsg2:false,
        msg:'',
        msg2:'',
        forget_alert:false,
        alert:false,
        isSend:false,
        countDownNum:60,
        showTop:1,
        phone:'',
        showUser:false,
        textIndex:0,
        textIndex2:0,
        ltype:1,
        tuData:[
                {
                type: '2017',
                sales: 10,
              },
              {
                type: '2018',
                sales: 190,
              },
              {
                type: '2019',
                sales: 300,
              },
              {
                type: '2020',
                sales: 320,
              },
              {
                type: '2021',
                sales: 480,
              },
        ],
        tuData2:[
            {
                type: '国家级载体',
                value: 75,
              },
              {
                type: '省级载体',
                value: 79,
              },
              {
                type: '市级载体',
                value: 97,
              }
        ],
        seriesData:[{
            name: '北京',
            value: 100
        }],
        cityData:{},
        plist:[],
        brand:[],
        textList:[],
        rtype:1,
        rtype2:3,
        news_info:[],
        ctype:1,
        href_info:[],
        showCity:false,
        hadUser:0,

        jgArr:[],
        jgId:"",
        jgName:"",

        showJG:false,

        showCityList:false,

        cityArr:[],

        cityName:"",

        areaArr:[],

        areaName:"",

        companys:0,
        courses_nums:0,
        teachers:0,
        dataNum:0,

        page:1,
        total:1,

        show:false,


    }

    componentWillMount(){

        let city = UrlSearch('city');

        if(city){
            this.setState({
                show:true
            })

            set('city',decodeURI(city));
            set('type',1);
            remove('mechanism');
        }

        // this.setState({
        //     cityArr:city.children
        // })

        
        this.getCityData();
        
    }
    getCityData=()=>{
        getApiMechanismList({
            type:get('type')?get('type'):0,
            content:get('city')?get('city'):get('mechanism')
        })
        .then( req =>{
            if(req.data.code === 1){
                this.setState({
                    jgArr:req.data.data
                })
            }
        }).catch(err =>{
            console.error(err);
        })

        let param = {
            type:get('type')?get('type'):0,
            content:get('city')?get('city'):get('mechanism'),
        }

        getApiBasicInfo(param)
        .then( req =>{
            if(req.data.code === 1){
                let data = req.data.data;
                this.setState({
                    basic_info:data,
                })
            }
        }).catch( err =>{
            console.error(err);
        })

        getApiIndexHref(param)
        .then( req =>{
            if(req.data.code === 1){
                let data = req.data.data;
                this.setState({
                    href_info:data,
                })
            }
        }).catch( err =>{
            console.error(err);
        })

        getApiCoursesIndex(param)
        .then( req =>{
            if(req.data.code === 1){
                let data = req.data.data;
                this.setState({
                    course_info:data,
                })
            }
        }).catch( err =>{
            console.error(err);
        })

        getApiImageNewInfo(param)
        .then( req =>{
            if(req.data.code === 1){
                let data = req.data.data;
                this.setState({
                    textList:data,
                })
            }
        }).catch( err =>{
            console.error(err);
        })

        getApiIndexNewsInfo(param)
        .then( req =>{
            if(req.data.code === 1){
                let data = req.data.data;
                this.setState({
                    news_info:data,
                })
            }
        }).catch( err =>{
            console.error(err);
        })

        getApiIndexData(param)
        .then( req =>{
            if(req.data.code === 1){
                let data = req.data.data;
                this.setState({
                    notice_info:data.notice_info,
                    // basic_info:data.basic_info,
                    policy_info:data.policy_info,
                    teacher_info:data.teacher_info,
                    // course_info:data.course_info,
                    // textList:data.image_new_info,
                    // news_info:data.news_info,
                    // href_info:data.href_info,
                    liveList:data.liveing_info,
                    textIndex:0,
                })

                // this.countInfoNum(data.basic_info);
            }
        }).catch( err =>{
            console.error(err);
        })


        getApisignlist({
            type:get('type')?get('type'):0,
            content:get('city')?get('city'):get('mechanism')
        })
        .then( req =>{
            if(req.data.code === 1){
                let data = req.data.data;
                this.setState({
                    signList:data.data,
                    signList2:data.list,
                    signList3:data.list,
                })
            }
        }).catch( err =>{
            console.error(err);
        })
        getApiHonorJs({
            type:get('type')?get('type'):0,
            content:get('city')?get('city'):get('mechanism')
        })
        .then( req =>{
            if(req.data.code === 1){
                let data = req.data.data;
                this.setState({
                    honorList:data,
                    showSwiper:false,
                })
                
                setTimeout(()=>{
                    this.setState({
                        showSwiper:true 
                    })
                    setTimeout(()=>{
                        this.gotoNext();
                    },500)
                },500)
            }
        }).catch( err =>{
            console.error(err);
        })


        getApiBanner({
            type:get('type')?get('type'):0,
            content:get('city')?get('city'):get('mechanism'),
        })
        .then( req =>{
            if(req.data.code === 1){
                this.setState({
                    banner:req.data.data
                })
            }
        }).catch( err =>{
            console.error(err);
        })

        let data = get('psw');


        
        if(data){
            
            this.setState({
                password:data.password,
                account:data.account,
                isforget:true
            })
        }

        if(get('token')){
            this.getUserInfo();
        }

        getApiLiveList({
            type:get('type')?get('type'):0,
            content:get('city')?get('city'):get('mechanism')
        })
        .then( req =>{
            if(req.data.code === 1){
                
               
            }
        }).catch( err =>{
            console.error(err);
        })
        getApiHomeBrandType({
            type:get('type')?get('type'):0,
            content:get('city')?get('city'):get('mechanism')
        })
        .then( req =>{
            if(req.data.code === 1){
               let data = req.data.data;
               this.setState({
                   brand:data
               }) 
               
            }
        }).catch( err =>{
            console.error(err);
        })
        getApiHomeTeacher({
            type:get('type')?get('type'):0,
            content:get('city')?get('city'):get('mechanism')
        })
        .then( req =>{
            if(req.data.code === 1){
                let data = req.data.data;
                this.setState({
                    teacher_list:data
                })
            }
        }).catch( err =>{
            console.error(err);
        })
    }

    componentDidMount(){

        if(get('token')){
            this.setState({
                hadUser:1
            })
        }

        window.addEventListener("scroll", ()=>{
            const top = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;

            let h = 500 - top;

            if(h>0){
                this.setState({showTop:1})
            }else{
                this.setState({showTop:0})
            }
          });


        if(get('type')){
            this.setState({
                type:parseInt(get('type'))
            })
        }





    }

    countInfoNum=(data)=>{

        this.setState({
            companys:parseInt(data.companys),
            dataNum:parseInt(data.data),
            courses_nums:parseInt(data.courses_nums),
            teachers:parseInt(data.teachers),

        })

    }

    changePage=(page)=>{
        this.setState({
            page
        })
    }

    convertData = (data , cname)=> {


        let cdata = [];

        let type = cname === '中国'? 1 : 2;

        if(type === 1){

          let arr = this.state.plist;

          console.log(arr);
          console.log(this.state.plist);

          for(var k=0;k<arr.length;k++){
            cdata.push({
              name:arr[k].province,
              value:[arr[k].lng, arr[k].lat, arr[k].id]
            })
          }
        }else{
          let arr = this.state.plist;

          console.log(arr);
          console.log(this.state.plist);

          for(var j=0;j<arr.length;j++){
            cdata.push({
              name:arr[j].city,
              value:[arr[j].lng, arr[j].lat, arr[j].id]
            })
          }
        }

        return cdata
        

        // return res;
    };

    componentWillUnmount(){
        console.log(656);

        clearInterval(this.state.timer);
        clearInterval(this.state.timer2);
        clearInterval(this.state.timer3);

        this.setState({
            showSwiper:false,
            showLiveSwiper:false,
            showCourseSwiper:false,
        })
    }

    getUserInfo=()=>{
        getApiUserInfo({token:get('token')})
        .then( req =>{
            if(req.data.code === 1){
                let data = req.data.data;

                if(!get('userinfo')){
                    set("userinfo",data);
                }

                this.setState({
                    userinfo:data,
                    showUser:true
                })
            }
        }).catch( err =>{
            console.error(err);
        })
    }

    gotoOut=()=>{
        remove('token');
        this.setState({
            showUser:false,
            showMsg:false,
        })
    }

    gotoSend=()=>{

        if(!this.state.phone){
            this.setState({
                msg2:'请先输入手机号！',
                showMsg2:true
            })
            return false;
        }

        var myreg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;

        if (!myreg.test(this.state.phone)) {
            this.setState({
                msg2:'请输入准确的手机号码！',
                showMsg2:true
            })
            return false;
        }

        let event = "resetpwd";


        let param = {
            mobile:this.state.phone,
            event
        }

        getApiSend(param)
        .then( req =>{
            console.log(req.data)
            if(req.data.code === 1){
                this.setState({
                    isSend:true
                })
                this.countDown();
            }else{
                this.setState({
                    msg2:req.data.msg,
                    showMsg2:true
                })
            }
        }).catch( err =>{
            console.error(err);
        })


        
        
    }

    countDown=() =>{ 
        let countDownNum = this.state.countDownNum-1;//获取倒计时初始值
        //如果将定时器设置在外面，那么用户就看不到countDownNum的数值动态变化，所以要把定时器存进data里面
        this.timer = setInterval(() => {


            if(countDownNum<=0){
                clearInterval(this.timer);
                this.setState({ countDownNum:60,  isSend: false })
            }else{
                this.setState({
                    countDownNum:(countDownNum--)
                })
            }
        }, 1000);
    }

    gotoHome=()=>{


        if(!this.state.account){
            this.setState({
                msg:'请先输入账号！',
                showMsg:true
            })
            return false;
        }

        if(!this.state.password){
            message.info('请先输入密码！');
            this.setState({
                msg:'请先输入账号！',
                showMsg:true
            })
            return false;
        }

        let param = {
            account:this.state.account,
            password:this.state.password,
        }

        getApiLogin(param)
        .then( req =>{
            console.log(req.data)
            if(req.data.code === 1){

                let data = req.data.data.userinfo;
                set("token",data.token);
                
                if(this.state.isforget){
                    set('psw',param);
                }else{
                    remove('psw');
                }

                setTimeout(()=>{
                    this.setState({
                        hadUser:1
                    })
                    message.success("登录成功！");
                    this.getUserInfo();
                },50)

                

                this.props.history.push('/home');
            }else{
                // message.info(req.data.msg);
                this.setState({
                    showMsg:true,
                    msg:req.data.msg
                })
            }
        }).catch( err =>{
            console.error(err)
        })
    }

    gotoChangePsw=()=>{


        if(!this.state.phone){
            this.setState({
                msg2:'请先输入手机号！',
                showMsg2:true
            })
            return false;
        }

        var myreg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;

        if (!myreg.test(this.state.phone)) {
            
            this.setState({
                msg2:'请输入准确的手机号码！',
                showMsg2:true
            })
            return false;
        }

        

        if(!this.state.newpassword){
            this.setState({
                msg2:'请先输入新密码！',
                showMsg2:true
            })
            return false;
        }

        if(!this.state.confirmpassword){
            this.setState({
                msg2:'请确认新密码！',
                showMsg2:true
            })
            return false;
        }

        if(!this.state.code){
            this.setState({
                msg2:'请先输入验证码！',
                showMsg2:true
            })
            return false;
        }

        if(this.state.newpassword !== this.state.confirmpassword){
            this.setState({
                msg2:'两次密码输入不一致！',
                showMsg2:true
            })
            return false;
        }



        let param = {
            type:"mobile",
            mobile:this.state.phone,
            captcha:this.state.code,
            newpassword:this.state.newpassword,
        }

        getApiresetpwd(param)
        .then( req =>{
            console.log(req.data)
            if(req.data.code === 1){
                message.success("密码修改成功！")
                this.setState({
                    forget_alert:false
                })
            }else{
                this.setState({
                    showMsg2:true,
                    msg2:req.data.msg,
                })
            }
        }).catch( err =>{
            console.error(err);
        })

    }


    gotoChangeBatch=()=>{
        getApiIndexData()
        .then( req =>{
            if(req.data.code === 1){
                let data = req.data.data;
                this.setState({
                    course_info:data.course_info,
                })
            }
        }).catch( err =>{
            console.error(err);
        })
    }

    onChange=(index)=>{
        this.setState({
            currentIndex:index
        })
    }

    gotoSlide=(num)=>{
        this.refs['bslide2'].goTo(num);
    }

    gotoUrl=(item)=>{
        console.log(item);
    }

    gotoNext=()=>{

        if(!this.state.showSwiper){
            return false;
        }

        const swiper = document.querySelector('.swiper-container').swiper;
        swiper.slideNext();//slideTo

        let activeIndex = swiper.activeIndex;
        this.initSwiperItem(activeIndex);
    }

    gotoSlideTo=(index)=>{
        const swiper = document.querySelector('.swiper-container').swiper;
        swiper.slideTo(index);//slideTo

        let activeIndex = swiper.activeIndex;
        this.initSwiperItem(activeIndex);
    }

    gotoNextCourse=()=>{

        if(!this.state.showCourseSwiper){
            return false;
        }

        let liveSwiper = document.getElementById('CourseSwiper');
        const swiper = liveSwiper.querySelector('.swiper-container').swiper;

        swiper.slideNext();
    }


    gotoPrevCourse=()=>{

        let liveSwiper = document.getElementById('CourseSwiper');
        const swiper = liveSwiper.querySelector('.swiper-container').swiper;

        swiper.slidePrev();

    }


    gotoNextLive=()=>{

        if(!this.state.showLiveSwiper){
            return false;
        }

        let liveSwiper = document.getElementById('liveSwiper');
        const swiper = liveSwiper.querySelector('.swiper-container').swiper;

        swiper.slideNext();
    }


    gotoPrevLive=()=>{

        let liveSwiper = document.getElementById('liveSwiper');
        const swiper = liveSwiper.querySelector('.swiper-container').swiper;

        swiper.slidePrev();

    }



    gotoPrev=()=>{
        const swiper = document.querySelector('.swiper-container').swiper;
        // Now you can use all slider methods like
        swiper.slidePrev();
        let activeIndex = swiper.activeIndex;

        this.initSwiperItem(activeIndex);
    }

    initSwiperItem=(activeIndex)=>{


        if(this.state.type !== 1){
            return false;
        }
        

        if(this.state.teacher_info.length <=0){
            return false;
        }

        let swpierBox = document.getElementById('swpierBox')
        let swiperItem = swpierBox.querySelectorAll('.swiper-slide');

        // console.log('initSwiperItem');

        for(var i=0;i<swiperItem.length;i++){
            // swiperItem[i].getElementsByTagName('span')[0].style.opacity = '0';
            swiperItem[i].style.opacity='1';
        }

        swiperItem[activeIndex].style.transform='scale(.625,.625) translateX(224px)';
        swiperItem[activeIndex].style.zIndex=1;
        swiperItem[activeIndex].style.opacity=0.5;
        swiperItem[activeIndex+4].style.zIndex=1;
        swiperItem[activeIndex+4].style.opacity=0.5;
        swiperItem[activeIndex+4].style.transform='scale(.625,.625) translateX(-224px)';
        swiperItem[activeIndex+1].style.transform='scale(.85,.85)';
        swiperItem[activeIndex+3].style.transform='scale(.85,.85)';
        swiperItem[activeIndex+1].style.zIndex=2;
        swiperItem[activeIndex+3].style.zIndex=2;
        swiperItem[activeIndex+2].style.transform='scale(1,1)';
        swiperItem[activeIndex+2].style.zIndex=3;

        if(activeIndex > 5){
            if(activeIndex !== this.state.activeIndex){
                console.log(activeIndex);
                this.setState({
                    activeIndex
                })
            }
        }

        // let span = swiperItem[activeIndex+2].getElementsByTagName('span')[0];
        // span.style.opacity = '1';
    }

    initLiveSwiperItem=()=>{

    }

    initLiveSwiperItem2=()=>{

    }

    handleSlideChange=()=>{
        const swiper = document.querySelector('.swiper-container').swiper;
  

        let activeIndex = swiper.activeIndex;
        this.initSwiperItem(activeIndex);
    }

    handleLiveSlideChange=()=>{

    }
    handleLiveSlideChange2=()=>{

    }

    gotoPage=(page)=>{
        this.props.history.push(page);
    }

    gotoCourseInfo=(id)=>{
        this.props.history.push('/courseinfo?id='+id);
    }

    render() {
        return (
            <div className="index">
                <Header hadUser={this.state.hadUser} showTop={this.state.showTop}  />
                
                <div className="h_banner">
                    <Carousel ref="bslide" dots={false} draggable={true} afterChange={(index)=>{this.onChange(index)}} autoplay={true} autoplaySpeed={3000}>
                        {
                            this.state.banner.map((item,index)=>{
                                return <div className='item' key={index} onClick={()=>{this.gotoUrl(item)}}>
                                            <div className="bg" style={{backgroundImage:"url('"+item.image_text+"')"}}></div>
                                        </div>
                            })
                        }
                    </Carousel>

                    <div className='bcen' hidden>
                        <div className='btns'>
                            <div className='btn' onClick={()=>{this.setState({showCityList:true})}}>
                                <img alt="" src="assets/imgs/shiyedanwei.png" />
                                <p>组织单位</p>
                            </div>
                            <div className='btn' onClick={()=>{this.setState({showJG:true})}}>
                                <img alt="" src="assets/imgs/peixunjigou.png" />
                                <p>培训机构</p>
                            </div>
                        </div>
                    </div>

                </div>


                <div className='page2'>
                    <div className='pm'>
                        <div className='left'>
                            <div className='nameBox'>
                                <div className='name'>
                                    <h1>行业新闻</h1>
                                    <span></span>
                                    <p>Industry News</p>
                                </div>
                                <div className='more' onClick={()=>{this.gotoPage('/notice')}}>
                                    <h2>MORE</h2>
                                    <img alt="" src="assets/imgs/gengduo.png" />
                                </div>
                            </div>

                            <div className='box'>
                                <Carousel ref="bslide2" dots={false} draggable={true} afterChange={(index)=>{this.setState({textIndex:index})}} autoplay={true} autoplaySpeed={3000}>
                                    {
                                        this.state.textList.map((item,index)=>{
                                            return <div>
                                                        <div className="item">
                                                            <div className='bg' style={{backgroundImage:"url('"+item.thumb_text+"')"}}></div>
                                                            <div className='info'>
                                                                <h2>{item.title}</h2>
                                                                <div className='date'>
                                                                    <img alt="" className='dimg1' src="assets/img/shijianhui.png" />
                                                                    <img alt="" className='dimg2' src="assets/imgs/shijian.png" />
                                                                    <p>{item.create_times_text}</p>
                                                                </div>
                                                                <div className='dtext'>
                                                                {item.cont}
                                                                </div>
                                                                <div className='know' onClick={()=>{this.gotoPage('/notice?id='+item.id+'&typeid=1')}}>了解更多</div>
                                                            </div>
                                                        </div>
                                                    </div>
                                        })
                                    }
                                </Carousel>

                                <div className="left_spans">
                                    {
                                        this.state.textList.map((item,index)=>{
                                            return <div onClick={()=>{this.gotoSlide(index)}} className={this.state.textIndex === index?"d_active":""}></div>
                                        })
                                    }
                                </div>
                            </div>
                        </div>
                        <div className='right'>
                            <div className='nameBox'>
                                <div className='name'>
                                    <h1>通知公告</h1>
                                    <span></span>
                                    <p>Notice announcement</p>
                                </div>
                                <div className='more' onClick={()=>{this.gotoPage('/notice')}}>
                                    <h2>MORE</h2>
                                    <img alt="" src="assets/imgs/gengduo.png" />
                                </div>
                            </div>

                            <div className='box'>
                                {
                                    this.state.news_info.map((item,index)=>{
                                        return <div className="item" key={index} onClick={()=>{this.gotoPage('/notice?id='+item.id+'&typeid='+item.type_id)}}>
                                                    <div className='date'>
                                                        <img alt="" src="assets/imgs/shijian.png" />
                                                        <p>{item.create_times_text}</p>
                                                    </div>
                                                    <h2>{item.title}</h2>
                                                    
                                                </div>
                                    })
                                }
                            </div>

                        </div>
                    </div>
                </div>

                {/* <div className='page4' style={{backgroundImage:"url('assets/img/bg4.png')"}}>
                    <div className='pm'>
                    <div className='nameBox'>
                            <div className='name'>
                                <h1>课程中心</h1>
                                <span></span>
                                <p>Curriculum center</p>
                            </div>
                            <div className='more' onClick={()=>{this.gotoPage('/course')}}>
                                <h2>MORE</h2>
                                <img alt="" src="assets/imgs/gengduo.png" />
                            </div>
                        </div>

                        <div className='list'>

                            <div className='lbox'>
                                {
                                    this.state.course_info.map((item,index)=>{
                                        return <div hidden={index > 3} className="item" key={index} onClick={()=>{this.gotoCourseInfo(item.id)}}>
                                                    <div>
                                                        <div className='bg' style={{backgroundImage:"url('"+item.image_text+"')"}}></div>
                                                    </div>
                                                    
                                                    <div className="ibom">
                                                        <h2>{item.title}</h2>
                                                        <div onClick={(ev)=>{ev.stopPropagation()}}>
                                                            <p onClick={()=>{this.gotoPage('/school?id='+item.sid)}}>{item.stitle}</p>
                                                            <p onClick={()=>{this.gotoPage('/teacherinfo?id='+item.teacher_id)}}>{item.tname}老师</p>
                                                        </div>
                                                        <div className="idiv">
                                                            <h4>{item.nums}课时</h4>
                                                            <div>{item.sale_num}人参加</div>
                                                        </div>
                                                    </div>
                                                </div>
                                    })
                                }
                            </div>
                            
                        </div>
                        <div className='nameBox'>
                            <div className='name'>
                                <h1>直播课程</h1>
                                <span></span>
                                <p>Live broadcast course</p>
                            </div>
                            <div className='more' onClick={()=>{this.gotoPage('/live')}}>
                                <h2>MORE</h2>
                                <img alt="" src="assets/imgs/gengduo.png" />
                            </div>
                        </div>

                        <div className='box'>
                            {
                                    this.state.liveList.map((item,index)=>{

                                        return <div className="item" hidden={index > 3} key={index} onClick={()=>{this.gotoPage('/liveinfo?id='+item.id)}}>
                                                        <div className="itop" style={{backgroundImage:"url('"+item.thumb_text+"')"}}>
                                                            <div className='imark'>
                                                                <img className="iimg" alt="" src="assets/imgs/bofang.png" />
                                                            </div>
                                                            <div className='ido2' hidden={item.is_open === 1} style={{backgroundImage:"url('assets/imgs/yuyuezhibo.png')"}}>
                                                            预约直播
                                                            </div>
                                                            <div className="ido" hidden={item.is_open !== 1}>
                                                                <img alt="" src="assets/imgs/do.gif" />
                                                                <p>正在直播中</p>
                                                            </div>
                                                        </div>
                                                        <div className="ibom">
                                                            <h2>{item.title}</h2>
                                                            <div onClick={(ev)=>{ev.stopPropagation()}}>
                                                                <p onClick={()=>{this.gotoPage('/school?id='+item.sid)}}>{item.stitle}</p>
                                                                <p onClick={()=>{this.gotoPage('/teacherinfo?id='+item.teacher_id)}}>{item.tname}老师</p>
                                                            </div>
                                                            <div className='idiv'>
                                                                <img alt="" src="assets/imgs/shijian.png" />
                                                                <h4>{item.start_time?item.start_time+"开始":"暂未设置开始时间"}</h4>
                                                                <div>{item.sale_num}人参加</div>
                                                            </div>
                                                        </div>
                                                </div>

                                    })
                                }
                        </div>

                        
                    </div>
                </div> */}

                <div className='page7'>
                    <div className='pm'>
                        <div className='nameBox'>
                            <div className='name'>
                                <h1>活动报名</h1>
                                <span></span>
                                <p>Activity Registration</p>
                            </div>
                            <div className='more' onClick={()=>{this.gotoPage('/signup')}}>
                                <h2>MORE</h2>
                                <img alt="" src="assets/imgs/gengduo.png" />
                            </div>
                        </div>
                        <div className='box'>
                            <div className='ban'>
                                <Carousel ref="bslide3" dots={false} draggable={true} afterChange={(index)=>{this.setState({textIndex2:index})}} autoplay={true} autoplaySpeed={3000}>
                                    {
                                        this.state.signList.map((item,index)=>{
                                            return <div>
                                                        <div onClick={()=>{this.gotoPage('/signupinfo?id='+item.id)}} className="item" style={{backgroundImage:"url('"+item.image+"')"}}>
                                                            <div className='info'>
                                                                <h2>{item.title}</h2>
                                                            </div>
                                                        </div>
                                                    </div>
                                        })
                                    }
                                </Carousel>
                            </div>
                            <div className='list'>
                                {
                                    this.state.signList2.map((item,index)=>{
                                        return <div className='item' hidden={index > 1} onClick={()=>{this.gotoPage('/signupinfo?id='+item.id)}}>
                                                    <h2>{item.title}</h2>
                                                    <div className='text'>{item.cont}</div>
                                                    <span></span>
                                                    <div className='date'>
                                                        <h4>{item.createtime}</h4>
                                                        <img alt="" src="assets/img/gengduo2.png" className='dimg1' />
                                                        <img alt="" src="assets/img/gengduo1.png" className='dimg2' />
                                                    </div>
                                                </div>
                                    })
                                }
                            </div>
                            <div className='list'>
                                {
                                    this.state.signList3.map((item,index)=>{
                                        return <div className='item2' hidden={index <= 1} onClick={()=>{this.gotoPage('/signupinfo?id='+item.id)}}>
                                                    <h2>{item.title}</h2>
                                                    <div className='date'>
                                                        <h4>{item.createtime}</h4>
                                                        <img alt="" src="assets/img/gengduo2.png" className='dimg1' />
                                                        <img alt="" src="assets/img/gengduo1.png" className='dimg2' />
                                                    </div>
                                                </div>
                                    })
                                }
                                
                            </div>
                        </div>
                    </div>
                </div>

                <div className='hp_expert' style={{backgroundImage:"url('assets/img/bg5.png')"}}>
                    <div className='cen'>
                        <div className='hm'>
                            
                            <div className='nameBox'>
                                <div className='name'>
                                    <h1>荣誉展示</h1>
                                    <span></span>
                                    <p>Honor display</p>
                                </div>
                                <div className='more' onClick={()=>{this.gotoPage('/honor')}}>
                                    <h2>MORE</h2>
                                    <img alt="" src="assets/imgs/gengduo.png" />
                                </div>
                            </div>

                            <div className="hitems" id="swpierBox" hidden={!this.state.showSwiper}>
                                <div className='hi_box'>
                                {
                                    this.state.showSwiper?<Swiper
                                    
                                    history = { true}
                                    slidesPerView = {this.state.slidesPerView}
                                    spaceBetween = {0}
                                    loop={true}
                                    onSlideChange={() => this.handleSlideChange()}
                                    onSwiper={(swiper) => {
                                        let activeIndex = swiper.activeIndex;
                                        this.initSwiperItem(activeIndex);
                                        setTimeout(()=>{
                                            this.initSwiperItem(activeIndex);

                                            let timer = setInterval(()=>{
                                                this.gotoNext();
                                            },4000)

                                            this.setState({
                                                timer
                                            })

                                        },100)
                                    }}
                                    >
                                    {
                                        this.state.honorList.map((item,index)=>{
                                            return <SwiperSlide key={index} virtualIndex={index}>
                                                        <div className='hitem' key={index} onClick={()=>{this.gotoPage('/honorinfo?id='+item.id)}}>
                                                            <div className='hbg' style={{backgroundImage:"url('"+item.image+"')"}}></div>
                                                            <div className='hinfo'>
                                                                <h2>{item.title}</h2>
                                                                <div>{item.summary}</div>
                                                            </div>
                                                        </div>
                                                    </SwiperSlide>
                                        })
                                    }


                                </Swiper>:null
                                }
                                </div>
                                <div onClick={()=>{this.gotoPrev()}} className="swiper-button-prev">
                                    <img alt="" src="assets/img/zuojiantou.png" />
                                </div>
                                <div onClick={()=>{this.gotoNext()}} className="swiper-button-next">
                                    <img alt="" src="assets/img/youjiantou.png" />
                                </div>
                        </div>

                           
                        </div>
                    </div>
                </div>

                <div className='page6'>
                    <div className='pm'>
                        <div className='nameBox'>
                            <div className='name'>
                                <h1>友情链接</h1>
                                <span></span>
                                <p>Links</p>
                            </div>
                            
                        </div>

                        <div className='box'>
                            {
                                this.state.href_info.map((item,index)=>{
                                    return <div className="item" hidden={index >= 8}>
                                                <div className='cen'>
                                                    <img className='img' alt='' src={item.image_text} />
                                                    <img className='img2' alt='' src={item.mouseimage_text} />
                                                </div>
                                                <h2>{item.name}</h2>
                                            </div>
                                })
                            }
                            
                        </div>
                    </div>
                </div>



                

                
            

                <div className="hp9" hidden>
                    <div className="cen">
                        <div className="hm">
                            <div className='cen'>
                                <div className='hp_name' style={{backgroundImage:"url('assets/imgs/youqinglianjie.png')"}}>
                                <h1>友情链接</h1>
                                </div>
                            </div>
                            <div className="box">
                                {
                                    this.state.href_info.map((item,index)=>{
                                        return <div className="item" onClick={()=>{
                                                // message.info("开发中...")
                                                }} key={index} style={{backgroundImage:"url('assets/imgs/lianjiekuang.png')"}}>
                                                    <img alt="" src="assets/imgs/lianjie.png" />
                                                    <p>{item.name}</p>
                                                </div>
                                    })
                                }
                                
                            </div>
                        </div>
                    </div>
                </div>

                <div className='alert' hidden={!this.state.showCityList}>
                    <div className='acity'>
                        <div className='atitle'>
                            <h2 className='point' onClick={()=>{this.setState({cityName:""})}}>甘肃省</h2>
                            <img hidden={!this.state.cityName} alt="" src="assets/imgs/right.png" />
                            <h2 hidden={!this.state.cityName}>{this.state.cityName}</h2>
                        </div>
                        {/* <div className='alist' hidden={!this.state.cityName}>
                            {
                                this.state.areaArr.map((item,index)=>{
                                    return <div className={this.state.areaName === item.label?'ali active':'ali'} key={index} onClick={()=>{this.setState({areaName:item.label})}}>{item.label}</div>
                                })
                            }
                        </div> */}
                        <div className='alist'>
                            {
                                this.state.cityArr.map((item,index)=>{
                                    return <div className={this.state.cityName === item.label?'ali active':'ali'} key={index} onClick={()=>{this.setState({cityName:item.label,areaArr:item.children})}}>{item.label}</div>
                                })
                            }
                        </div>
                        <div className='abom'>
                            <h2>您的选择是：</h2>
                            <p>甘肃省</p>
                            <img hidden={!this.state.cityName} alt="" src="assets/imgs/right.png" />
                            <p hidden={!this.state.cityName}>{this.state.cityName}</p>
                            <img hidden={!this.state.areaName} alt="" src="assets/imgs/right.png" />
                            <p hidden={!this.state.areaName}>{this.state.areaName}</p>
                        </div>
                        <div className='abtns'>
                            <button className='btn1' onClick={()=>{
                                if(!this.state.cityName){
                                    message.info("请先选择省市区")
                                    return false;
                                }

                                set('city',this.state.cityName);
                                set('type',1);
                                remove('mechanism');
                                this.setState({showJG:false})
                                window.location.reload();
                            }}>确定</button>
                            <button className='btn2' onClick={()=>{this.setState({showCityList:false})}}>取消</button>
                        </div>
                    </div>
                </div>

                <div className='alert' hidden={!this.state.showJG}>
                    <div className='acity'>
                        <div className='atitle'>
                            <h2>选择培训机构</h2>
                        </div>
                        <div className='alist'>
                            {
                                this.state.jgArr.map((item,index)=>{
                                    return <div className={this.state.jgId === item.id?'ali2 active':'ali2'} key={index} onClick={()=>{this.setState({jgName:item.title,jgId:item.id})}}>{item.title}</div>
                                })
                            }
                        </div>
                        <div className='abom'>
                            <h2>您的选择是：</h2>
                            <p>{this.state.jgName}</p>
                        </div>
                        <div className='abtns'>
                            <button className='btn1' onClick={()=>{
                                if(!this.state.jgName){
                                    message.info("请先选择机构")
                                    return false;
                                }

                                set('mechanism',this.state.jgId);
                                remove('type');
                                remove('city');

                                this.gotoPage('/home')
                            }}>确定</button>
                            <button className='btn2' onClick={()=>{this.setState({showJG:false})}}>取消</button>
                        </div>
                    </div>
                </div>

                <div className="alert" hidden={!this.state.alert}>
                    <div className="abox">
                        <div className="acen">
                            <img alt="" src="assets/imgs/chenggong.png" />
                        </div>
                        <h2>密码修改成功！</h2>
                        <p>请您用新的密码重新登录系统，感谢您的理解！</p>
                        <div className="acen">
                            <button onClick={()=>{this.setState({alert:false})}}>好的，去登录</button>
                        </div>
                    </div>
                </div>

                <div className="alert" hidden={!this.state.forget_alert}>
                    <div className="forget_alert">
                        <img className="close" onClick={()=>{this.setState({forget_alert:false})}} alt="" src="assets/imgs/tankuangcha.png" />
                        <h2>修改密码</h2>
                        <div className="aitem">
                            <p>请输入手机号</p>
                            <input type="text" placeholder="请输入手机号" value={this.state.phone} onChange={(ev)=>{this.setState({phone:ev.target.value})}} />
                        </div>
                        <div className="aitem">
                            <p>请输入新密码</p>
                            <input type="password" placeholder="请输入新密码" value={this.state.newpassword} onChange={(ev)=>{this.setState({newpassword:ev.target.value})}} />
                        </div>
                        <div className="aitem">
                            <p>请输入验证码</p>
                            <div className="aipt">
                                <input className="a2" type="text" placeholder="请输入新密码" value={this.state.code} onChange={(ev)=>{this.setState({code:ev.target.value})}} />
                                <h4 onClick={()=>{this.gotoSend()}}>{this.state.isSend?this.state.countDownNum+"s 后重发":"获取验证码"}</h4>
                            </div>
                        </div>
                        <div className="aitem">
                            <p>确认密码</p>
                            <input type="password" placeholder="确认密码" value={this.state.confirmpassword} onChange={(ev)=>{this.setState({confirmpassword:ev.target.value})}} />
                        </div>
                        <div className="amsg">
                            <p hidden={!this.state.showMsg2}>{this.state.msg2}</p>
                        </div>
                        <button onClick={()=>{this.gotoChangePsw()}}>更新密码</button>
                    </div> 
                </div>
                <Footer />
            </div>
        )
    }
}
